import { createVNode, render } from "vue";
import FloatScreen from "./FloatScreen.vue";

function getContainer() {
  const container = document.getElementById("svga-container");
  if (container) {
    return container;
  }
  const divContainer = document.createElement("div");
  divContainer.id = "svga-container";
  // 添加到body上
  document.body.appendChild(divContainer);
  return divContainer;
}

const renderContent = vNode => {
  const container = getContainer();
  const div = document.createElement("div");
  // 添加到body上
  container.appendChild(div);
  render(vNode, div);
};

// 创建组件动画
export function createComponent(options) {
  const { floatData } = options;
  const vNode = createVNode(FloatScreen, {
    floatData,
    onComplete: () => {
      render(null, vNode.el);
    }
  });
  renderContent(vNode);
}
